<template>
  <div class="right-container">
    <div class="screen-container">
      <!--        <span class="font-title">关键字：</span>-->
      <!-- 搜索框 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input
            v-model="input_value"
            size="small"
            placeholder="请输入关键字"
            style="width: 260px; margin-right: 24px"
            class="seach-input"
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button size="small">重置</el-button>
          <el-button type="primary" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10" style="margin: 20px 0 0">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <div class="app-container">
      <el-table
        v-loading="loading"
        :data="roleList"
        :header-cell-style="{ background: '#F3F5FC' }"
      >
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scop">
            {{ scop.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="事件名称" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button type="text" @click="$router.push('/kpicode')">{{
              scope.row.name
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="事件级别"
          prop="level"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              class="Inspan"
              :class="
                scope.row.level == '一般'
                  ? 'simple'
                  : scope.row.level == '较大'
                  ? 'big'
                  : scope.row.level == '重大'
                  ? 'major'
                  : 'serious'
              "
              >{{ scope.row.level }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="事件分类" prop="classify"> </el-table-column>

        <el-table-column label="对象分类" prop="objectclass" />
        <el-table-column label="发生次数" prop="num" width="80"> </el-table-column>
        <el-table-column label="处置情况" prop="send" fixed="right" align="center" width="280">
          <template slot-scope="scope">
            <el-tag type="warning">{{ scope.row.wcz }}</el-tag>
            <el-tag style="margin-left: 5px">{{ scope.row.czz }}</el-tag>
            <el-tag type="success" style="margin-left: 5px">{{
              scope.row.ycz
            }}</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-dialog
        title="添加"
        :visible.sync="open"
        width="1000px"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        class="dia-style"
      >
        <div style="padding: 0 20px 20px 0">
          <dia-form></dia-form>
        </div>
        <!-- 底部 -->
        <div slot="footer">
          <el-button type="primary" @click="open = false">保 存</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import DiaForm from "../Common/DiaForm.vue";
import moni from "../../components/security/moni.json";
export default {
  components: { DiaForm },
  props: {
    checkList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      //   搜索框的值
      input_value: "",
      // 新增框是否 可见
      open: false,
      // 遮罩层
      loading: true,
      // 选中数组

      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [
        {
          name: "设备异常",
          level: "重大",
          objectclass: "网络",
          classify: "设备故障",
          num: "1",
          wcz: "未处置(0)",
          czz: "处置中(1)",
          ycz: "已处置(0)",
        },
        {
          name: "异常开机事件",
          level: "特别重大",
          objectclass: "终端",
          classify: "用户违规",
          num: "1",
          wcz: "未处置(1)",
          czz: "处置中(0)",
          ycz: "已处置(0)",
        },
        {
          name: "防火墙策略变化事件",
          level: "重大",
          objectclass: "网络",
          classify: "运维异常",
          num: "1",
          wcz: "未处置(0)",
          czz: "处置中(1)",
          ycz: "已处置(0)",
        },
        {
          name: "终端异常数据输出",
          level: "重大",
          objectclass: "终端",
          classify: "用户违规",
          num: "1",
          wcz: "未处置(0)",
          czz: "处置中(0)",
          ycz: "已处置(1)",
        },
        {
          name: "防火墙阻断异常IP访问",
          level: "一般",
          objectclass: "网络",
          classify: "网络攻击",
          num: "1",
          wcz: "未处置(1)",
          czz: "处置中(0)",
          ycz: "已处置(0)",
        },
      ],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      let role = [
        {
          name: "设备异常",
          level: "重大",
          objectclass: "网络",
          classify: "设备故障",
          num: "1",
          wcz: "未处置(0)",
          czz: "处置中(1)",
          ycz: "已处置(0)",
        },
        {
          name: "异常开机事件",
          level: "特别重大",
          objectclass: "终端",
          classify: "用户违规",
          num: "1",
          wcz: "未处置(1)",
          czz: "处置中(0)",
          ycz: "已处置(0)",
        },
        {
          name: "防火墙策略变化事件",
          level: "重大",
          objectclass: "网络",
          classify: "运维异常",
          num: "1",
          wcz: "未处置(0)",
          czz: "处置中(1)",
          ycz: "已处置(0)",
        },
        {
          name: "终端异常数据输出",
          level: "重大",
          objectclass: "终端",
          classify: "用户违规",
          num: "1",
          wcz: "未处置(1)",
          czz: "处置中(0)",
          ycz: "已处置(0)",
        },
        {
          name: "防火墙阻断异常IP访问",
          level: "一般",
          objectclass: "网络",
          classify: "网络攻击",
          num: "1",
          wcz: "未处置(0)",
          czz: "处置中(0)",
          ycz: "已处置(1)",
        },
      ];

      if (!this.checkList.length) {
        this.roleList = role;
      } else if (this.checkList.length == 1) {
        this.roleList = role.filter((item) => {
          // return this.checkList.includes(item.level) ||  this.checkList.includes(item.classify)
          return this.checkList.some((i) => {
            return i.title == item.level || i.title == item.classify;
          });
        });
      } else {
        this.roleList = role.filter((item) => {
          // return this.checkList.includes(item.level) &&  this.checkList.includes(item.classify)
          let arr1 = this.checkList.map((i) => {
            return i.title;
          });
          if (arr1.includes(item.level) != arr1.includes(item.classify) ) {
            console.log(1);
            return arr1.includes(item.level) || arr1.includes(item.classify);
          } else {
            console.log(2);
            return arr1.includes(item.level) && arr1.includes(item.classify);
          }
        });
      }
      // console.log(this.roleList);
      this.total = this.roleList.length;
      this.loading = false;
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
    },
  },
  watch: {
    checkList(newValue, oldValue) {
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 0;
}

.iconi {
  width: 16px;
  height: 16px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  line-height: 16px;
  color: white;
  &::before {
    font-size: 10px;
    font-weight: 600;
  }
}
</style>
